<template>
    <div class="box">
        <div class="title">
            <div>自动回复</div>
            <div style="color: #ccc;font-size: 16px;font-weight: 500;">
                非客服管理员仅支持编辑接入欢迎语
            </div>
        </div>

        <div class="boxCenter">
            <div class="title">开场白</div>
            <div class="subTitle">用户进入客服会话,自动回复此开场白</div>

            <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 10 }" placeholder="请输入开场白"
                v-model="openingRemarks" style="margin: 20px 0px;">
            </el-input>

            <div class="title">常见问题</div>
            <div class="subTitle">在开场白的基础上,配置常见问题,减少客服接待压力; <span class="commonProblems"
                    @click="addQuestion">添加问题</span> </div>

            <!-- <div v-for="(item, index) in problemList" class="problemRow">
                <div style="width: 30%;">
                    <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 10 }" placeholder="请输入开场白"
                        v-model="openingRemarks">
                    </el-input>
                </div>

                <div style="width: 60%;">
                    <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 10 }" placeholder="请输入开场白555"
                        :disabled="true" v-model="openingRemarks">
                    </el-input>
                </div>

                <div>
                    <el-button round icon="el-icon-delete" @click="deletePrice(index)"></el-button>
                </div>
            </div> -->

            <el-table :data="data" style="width: 100%">
                <el-table-column prop="problem" label="问题" width="180">
                </el-table-column>
                <el-table-column prop="answer" label="问题解答">
                    <template slot-scope="{ row }">
                        <div v-html="row.answer"></div>
                    </template>
                </el-table-column>

                <el-table-column label="操作" :min-width="80" align="right" fixed="right">
                    <template slot-scope="{ row }">
                        <el-button @click.native="edit(row)">修改</el-button>

                        <el-popconfirm title="这是一段内容确定删除吗？" @confirm="dele(row)">
                            <el-button slot="reference">删除</el-button>
                        </el-popconfirm>

                    </template>
                </el-table-column>
            </el-table>

        </div>


    </div>
</template>
<script>
import editorBar from '@/components/editorBar'

export default {
    components: {
        editorBar
    },
    data() {
        return {
            openingRemarks: '', // 开场白
            problemList: [{}], //常见问题列表

            editor: null,
            html: '<p>hello</p>',
            toolbarConfig: {},
            editorConfig: { placeholder: '请输入内容...' },
            mode: 'default', // or 'simple'

            query: {
                page: 1,
                limit: 12,
            },
            data: [],
            loading: false,

        }
    },
    components: {
    },
    created() {

    },
    mounted() {
        // 模拟 ajax 请求，异步渲染编辑器
        setTimeout(() => {
            this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
        }, 1500)
    },

    methods: {

        submit() { },

        cancel() {
            this.dialog = false
        },

        //获取常见问题列表
        async getList() {
            let res = await this.$api.frequentlyAskedQuestions_list(this.query)
            this.data = res.data.list
        },

        onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },

        onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },

        beforeDestroy() {
            const editor = this.editor
            if (editor == null) return
            editor.destroy() // 组件销毁时，及时销毁编辑器
        },
        // 点击删除
        async dele(row) {
            console.log(row);
            let res = await this.$api.frequentlyAskedQuestions_dele({ids:[row.frequentlyAskedQuestionsId]})
            if(res.code ==200){
                this.$message.success(res.msg)
                this.getList()
            }else{
                this.$message.error(res.msg)
            }
            
        },
        //点击问题
        edit(row) {
            this.$emit('open', '修改问题', row)
        },

        //添加常见问题
        addQuestion() {
            this.$emit('open', '添加问题')
        },
    }

}
</script>
<!-- <style src="@wangeditor/editor/dist/css/style.css"></style> -->
<style lang="scss" scoped>
.commonProblems {
    color: #409eff;
    font-size: 14px;
    text-decoration: underline;
    margin-left: 8px;
    cursor: pointer;
}

.box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 20px;

    .boxCenter {
        width: 100%;
        background-color: #fff;
        border-radius: 15px;
        box-sizing: border-box;
        padding: 20px;
        margin: 10px 0;

        .problemRow {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 16px 0px;
        }

        .title {
            font-size: 20px;
            color: #1f1f1f;
            font-weight: 500;
        }

        .subTitle {
            display: flex;
            justify-content: flex-start;
            display: flex;
            align-items: center;

        }
    }

    .title {
        width: 100%;
        font-size: 30px;
        display: flex;
        flex-direction: column;
        font-weight: bold;
        align-items: flex-start;
        color: #302f2f;
        justify-content: flex-start;
    }
}
</style>